<template>
  <!-- 顶部导航模块 -->
  <div class="top-section">
    <h2 class="section-title">租币当钱花</h2>
    <div class="nav-grid">
      <div 
        v-for="(item, index) in navItems" 
        :key="index"
        :class="['nav-item', item.className]"
        @click="navigateToPage(item.path)"
      ></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter();
import { NAV_ITEMS } from '@/views/home/config';
// 导航项数据
const navItems = NAV_ITEMS;

// 导航到指定页面
const navigateToPage = (path: string) => {
  router.push(path);
};
</script>

<style lang="scss" scoped>
.top-section {
  padding: 10px 16px;

  .section-title {
    font-family: PingFangSC, PingFang SC;
    font-weight: 600;
    font-size: 17px;
    color: #222222;
    margin-bottom: 20px;
  }

  .nav-grid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: scroll;
    // 隐藏滚动条但保持滚动功能
    -ms-overflow-style: none;
    scrollbar-width: none;
    // 滚动行为平滑
    scroll-behavior: smooth;

    // 隐藏WebKit浏览器的滚动条
    &::-webkit-scrollbar {
      display: none;
    }

    .nav-item {
      width: 70px;
      height: 95px;
      border-radius: 3px;
      padding: 15px;
      margin-bottom: 15px;
      margin-right: 10px; // 添加间距
      flex-shrink: 0; // 防止项目缩小
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer; // 添加鼠标指针样式
      transition: transform 0.2s; // 添加过渡效果

      &:active {
        transform: scale(0.95); // 点击时的缩放效果
      }
    }

    .nav-img1 {
      background-image: url('@/assets/image/pic_shop@2x.webp');
    }

    .nav-img2 {
      background-image: url('@/assets/image/pic_cash@2x.webp');
    }

    .nav-img3 {
      background-image: url('@/assets/image/pic_task@2x.webp');
    }

    .nav-img4 {
      background-image: url('@/assets/image/pic_cash@2x.webp');
    }
  }
}
</style>